<template>
  <div class="carousel-wrapper">
    <!-- <el-carousel :interval="3000" type="" height="" indicator-position="none">
      <el-carousel-item v-for="(item, index) in images" :key="index">
        <img :src="item" alt="" class="item_img" @click="login">
      </el-carousel-item>
    </el-carousel> -->

<van-swipe class="my-swipe" :autoplay="3000" :show-indicators="false" >
  <van-swipe-item v-for="(item, index) in images" :key="index">
    <img :src="item" alt="" class="item_img" @click="login">
  </van-swipe-item>
</van-swipe>
  </div>
</template>
  
<script lang="ts">
export default defineComponent({
  components: {
    ElCarousel,
    ElCarouselItem,
  },
  data() {
    return {
      images: [
        "https://fdfs.xmcdn.com/storages/1d36-audiofreehighqps/17/4A/GKwRIDoIcGwAAAIpEwIvmV7v.jpg",
        "https://fdfs.xmcdn.com/storages/a012-audiofreehighqps/10/73/GKwRIW4IAZ0WAAIh4QIKyIHF.jpg",
        "https://fdfs.xmcdn.com/storages/b653-audiofreehighqps/6C/F8/GMCoOSYIroPxAAGD3AJIYphX.jpg",
        '/src/assets/slideshow/01.jpg',
        '/src/assets/slideshow/02.jpg',
      ],
    };
  },
});
</script>

<script setup lang="ts">
import { defineComponent } from 'vue';
import { ElCarousel, ElCarouselItem } from 'element-plus'
import router from '@/router';

const login = () => {
  router.push('')
}
</script>
  
<style scoped lang="less">

.el-carousel__item.is-active.is-animating {
  display: flex;
  justify-content: center;
}
// .el-carousel__item.is-active.is-animating{
//   // height: 40%;
// }
// .el-carousel__item.is-animatin{
//   // height: 40%;
// }
.carousel-wrapper {
  width: 375px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item_img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

// .el-carousel__item:nth-child(1) {
//   // width: 100%;
//   // background-color: #99a9bf;

// }

// .el-carousel__item:nth-child(2n + 1) {
//   // background-color: #d3dce6;
//   // width: 292.5px;
//   // height: 126px;
// }

// .el-carousel__item:nth-child(2n + 2) {
//   // background-color: #d3dce6;
//   // width: 292.5px;
//   // height: 126px;
// }

// .el-carousel__mask {
//   width: 10px;
//   height: 10px;
// }
</style>